<template>
  <div>
    <div class="upload_box">
      <div v-for="(item, index) in list" :key="index">
        <el-upload
          class="jnhfxq2_pz_uploadbox"
          :action="url + '/index/ajax/upload'"
          :limit="item.limit ? item.limit : 99999"
          list-type="picture-card"
          :disabled="item.disabled"
          :file-list="item.imglist"
          :on-success="
            (response, file, fileList) => {
              handleSuccess(response, file, fileList, index);
            }
          "
          :on-preview="
            (file) => {
              handlePictureCardPreview(file, index);
            }
          "
          :on-remove="
            (file, fileList) => {
              handleRemove(file, fileList, index);
            }
          "
          :before-upload="beforeAvatarUpload"
          :on-exceed="handleExceed"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="item.value.dialogVisible" append-to-body>
          <img width="100%" :src="item.value.dialogImageUrl" alt="" />
        </el-dialog>
        <div class="notes1_box">{{ item.notes1 }}</div>
        <div class="notes_box">{{ item.notes }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import env from "../../env.js";

export default {
  props: {
    list: {
      type: Array,
      default: [],
      required: true,
    },
  },
  data() {
    return {
      fileList: [],
      url: env.API_BASE_URL,
    };
  },
  mounted() {},
  methods: {
    /**
     * 删除文件
     */
    handleRemove(file, fileList, index) {
      //  console.log(file,fileList, index)
      // console.log(fileList.slice(-3))
      this.list.forEach((item, i) => {
        if (i == index) {
          // item.imglist.forEach((data, a) => {
          //   if (data.url == file.url) {
          //     this.$emit("splice", item.imglist.splice(a, 1));
          //   }
          // });
          this.$emit("splice", (item.imglist = fileList.slice(-100)));
        }
      });
    },
    /**
     * 上传图片预览
     * @param {上传文件被点击方法回调} file
     * @param {当前信息栏的下标} index
     */
    handlePictureCardPreview(file, index) {
      // console.log(file.url)
      this.list.forEach((item, i) => {
        if (i == index) {
          item.value.dialogVisible = true;
          item.value.dialogImageUrl = file.url;
        }
      });
    },
    /**
     * 上传成功
     * @param {后台返回的参数} response
     * @param {方法本身回调} file
     * @param {文件列表} fileList
     * @param {当前信息栏的下标} index
     */
    handleSuccess(response, file, fileList, index) {
      // console.log(response);
      // console.log(fileList.slice(-3))
      //   handleSuccess(response, file, fileList) {
      //   // console.log(response, file, fileList)
      //   this.fileList = fileList.slice(-3);
      //   // console.log(this.fileList)
      // },

      this.list.forEach((item, i) => {
        if (i == index) {
          this.$emit(
            "add",
            // item.imglist.push({
            //   url: this.$self.imgurl(response.data.url),
            // })
            (item.imglist = fileList.slice(-100))
          );
        }
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    beforeAvatarUpload(file) {
      const typeArry = [".jpg", ".png", ".JPG", ".PNG", ".jpeg"];
      const type = file.name.substring(file.name.lastIndexOf("."));
      const isImage = typeArry.indexOf(type) > -1;

      const isLt2M = 0.4 < file.size / 1024 / 1024 < 0.6;

      if (!isImage) {
        this.$message.error("请上传格式为.jpg, .png, .JPG, .PNG, .jpeg,的图片！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小400-600k");
      }
      return isImage && isLt2M;
    },
    //  ==
  },
};
</script>
<style>
.upload_box {
  display: flex;
}
.upload_box > div {
  width: 50%;
  text-align: center;
}
.upload_box .el-upload {
  width: 71px;
  height: 71px;
  background: #fafafa;
  border: 1px solid #f2f2f2;
}
.upload_box .el-upload--picture-card {
  line-height: 75px !important;
}
.upload_box .el-upload--picture-card i {
  font-size: 0.35rem;
}
.upload_box .el-upload-list--picture-card .el-upload-list__item {
  width: 0.9rem;
  height: 0.9rem;
}
.notes1_box {
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  margin-top: 0.225rem;
}
.notes_box {
  margin: auto;
  width: 4.625rem;
  font-size: 0.175rem;
  font-weight: 400;
  color: #7c7c7c;
  margin-top: 0.1875rem;
}
</style>